<template>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" size="1000" @close="handleClose">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="120px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item label="产品名称" prop="title" class="required label-right-align">
        <el-input
          v-model="formData.title"
          type="text"
          clearable
          :style="{ width: '300px' }"
          placeholder="请输入产品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="产品类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择产品类型">
          <el-option label="太阳膜质保" value="membrane"></el-option>
          <el-option label="车衣/改色" value="guarantee"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="质保年限" prop="years">
        <el-input-number
          v-model="formData.years"
          :min="1"
          :max="100"
          controls-position="right"
          placeholder="请输入质保年限"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { addProductApi, editProductApi } from "@/api/carfilm/factory";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const dialogTitle = ref("");
const isupload = ref(false);
const productData = ref<
  | {
      id: number;
      title: string;
      type: "membrane" | "guarantee";
      factory_id: number;
      years: number;
    }[]
  | null
>([]);
const membraneData = computed(() => {
  return productData.value?.filter((item: any) => item.type == "membrane");
});
const guaranteeData = computed(() => {
  return productData.value?.filter((item: any) => item.type == "guarantee");
});
const formData = ref({
  id: 0,
  title: "",
  type: "",
  factory_id: 0,
  years: 5,
});
const rules = reactive({
  title: [
    {
      required: true,
      message: "请输入产品名称",
    },
  ],
  type: [
    {
      required: true,
      message: "请选择产品类型",
    },
  ],
  years: [
    {
      required: true,
      message: "请输入质保年限",
    },
  ],
});

const emits = defineEmits(["getTable"]);
function addSave() {
  addProductApi(formData.value)
    .then((res) => {
      ElMessage.success("添加成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}
function editSave() {
  editProductApi(formData.value)
    .then((res) => {
      ElMessage.success("编辑成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}

function submitForm() {
  formRef.value.validate().then(() => {
    if (formData.value.id == 0) {
      addSave();
    } else {
      editSave();
    }
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (row: any) => {
  dialogFormVisible.value = true;
  if (row?.id > 0) {
    dialogTitle.value = "编辑产品";
    formData.value = {
      id: row.id,
      factory_id: row.factory_id,
      type: row.type,
      title: row.title,
      years: row.years,
    };
  } else {
    dialogTitle.value = "添加产品";
    formData.value = {
      id: 0,
      factory_id: row.factory_id,
      type: row.type,
      title: "",
      years: 5,
    };
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    title: "",
    type: "",
    factory_id: 0,
    years: 5,
  };
  dialogFormVisible.value = false;
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
